<template>
	<view class="usercenter-container">
		<u-modal :show="showUserInfo"
			:title="titleUserInfo" 
			:content='contentUserInfo' 
			:closeOnClickOverlay="true"
			@close="closeUserInfo"
			@confirm="editUserInfo"
			confirmText="保存"
			
			>
			<u--form labelPosition="left" :model="userInfo" :rules="rules"
			 ref="formUserInfo" :errorType="errorType">
				<u-form-item prop="nickName" borderBottom ref="nickName" labelWidth="70">
					<u--input v-model="userInfo.nickName" border="none" prefixIcon="account-fill"
						prefixIconStyle="font-size: 22px;color: #909399" placeholder="请输入昵称"></u--input>
				</u-form-item>
				
				<u-form-item prop="phonenumber" borderBottom ref="phonenumber" labelWidth="70">
					<u--input v-model="userInfo.phonenumber" border="none" :clearable='true' prefixIcon="phone-fill"
						prefixIconStyle="font-size: 22px;color: #909399" placeholder="请输入手机号"></u--input>
				</u-form-item>
				
				<u-form-item prop="sex" borderBottom ref="sex" labelWidth="70">
					 <u-radio-group
					    v-model="userInfo.sex"
					    placement="row"
					  >
					  <u-radio
					     label="男"
					     :name="0"
					     :value="0"
					   >
					    </u-radio>
					   <u-radio
					      label="女"
					      :name="1"
					      :value="1"
					    >
						</u-radio>
						<u-radio
						   label="未知"
						   :name="2"
						   :value="2"
						 >
					    </u-radio>
					  </u-radio-group>
				</u-form-item>
				
			</u--form>

		</u-modal>
		
		
		<u-modal :show="showUserPwd"
			:title="titleUserPwd" 
			
			:closeOnClickOverlay="true"
			@close="closeUserPwd"
			@confirm="editUserPwd"
			confirmText="保存"
			
			>
			<u--form labelPosition="left" :model="userInfoPwd" :rules="rulesPwd"
			 ref="formUserPwd" :errorType="errorType">
				<u-form-item prop="oldPassword" borderBottom ref="oldPassword" labelWidth="70">
					<u--input v-model="userInfoPwd.oldPassword" border="none" prefixIcon="account-fill"
						prefixIconStyle="font-size: 22px;color: #909399" placeholder="请输入旧密码"></u--input>
				</u-form-item>
				
				<u-form-item prop="newPassword" borderBottom ref="newPassword" labelWidth="70">
					<u--input v-model="userInfoPwd.newPassword" border="none" prefixIcon="account-fill"
						prefixIconStyle="font-size: 22px;color: #909399" placeholder="请输入新密码"></u--input>
				</u-form-item>
				
				<u-form-item prop="rePassword" borderBottom ref="rePassword" labelWidth="70">
					<u--input v-model="userInfoPwd.rePassword" border="none" prefixIcon="account-fill"
						prefixIconStyle="font-size: 22px;color: #909399" placeholder="请再次输入新密码"></u--input>
				</u-form-item>
				
			</u--form>
		
		</u-modal>
		
		<view class="usercenter-header">
			<!-- <u--text text="用户中心" align="center" lineHeight="38" size="18"></u--text> -->
			<!-- 用户中心 -->
			<u-navbar :title="title" bgColor="#98c39a" :placeholder="true" leftIcon="">
			</u-navbar>
		</view>
		<view class="usercenter-info">

			<view class="info-img">
				<u--image width="60" height="60" src="/static/myphoto.jpg" shape="circle"></u--image>
			</view>

			<view class="info-text">
				<view class="info-userName">
					姓名：<span>{{user.userName}}</span>
				</view>

				<view class="info-nickName">
					昵称：<span>{{user.nickName}}</span>
				</view>

				<view class="info-phoneNumber">
					手机：<span>{{user.phonenumber}}</span>
				</view>
			</view>

		</view>
		<u-cell-group>
			<u-cell title="修改个人信息" isLink @click="openUserInfoEdit">
				<u-icon slot="icon" size="20" name="search"></u-icon> <!-- 插槽 -->
			</u-cell>
			<u-cell icon="lock-fill" title="修改用户密码" isLink @click="openUserPwdEdit"></u-cell>
			<u-cell icon="file-text-fill" title="新增意见反馈" isLink></u-cell>
			<u-cell icon="email-fill" title="意见反馈列表" isLink @click="toFeedBackList"></u-cell>
			<u-cell icon="setting-fill" title="设置" isLink></u-cell>

		</u-cell-group>
		<!-- 退出登录 -->
		<view class="qiehuan">
			<u-button type="primary" text="切换账号"></u-button>
		</view>
		<!-- 退出登录 -->
		<!-- 退出登录 -->
		<view class="logout">
			<u-button type="primary" text="退出登录" @click="logout"></u-button>
		</view>
		<!-- 退出登录 -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'用户中心',
				userInfo:{
					nickName:'',
					phonenumber:'',
					sex:0
				},
				user: {},
				showUserInfo: false,
				titleUserInfo: '修改个人信息',
				contentUserInfo: '修改的内容',
				errorType:'border-bottom',
				rules: {
					'nickName': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'phonenumber': {
						type: 'number',
						required: true,
						len: 11,
						message: '手机号码格式不正确',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					
				},
				// 修改用户密码
				userInfoPwd:{
					newPassword:'',
					oldPassword:'',
					rePassword:''
				},
				showUserPwd: false,
				titleUserPwd: '修改个人密码',
				rulesPwd: {
					'oldPassword': [{
						type: 'string',
						required: true,
						message: '请填写原来的密码',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					{
						min: 6,
						max: 10,
						message: '长度在6-10个字符之间',
						trigger: ['blur', 'change']
					}],
					'newPassword': [{
						type: 'string',
						required: true,
						message: '请填写新密码',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					{
						min: 6,
						max: 10,
						message: '长度在6-10个字符之间',
						trigger: ['blur', 'change']
					}],
					'rePassword': [{
							type: 'string',
							required: true,
							message: '请填写确认密码',
							trigger: ['blur', 'change']
						},
						{
							min: 6,
							max: 10,
							message: '长度在6-10个字符之间',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
							
								return  this.userInfoPwd.newPassword===value;
							},
							message: '两次输入的密码要一致',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					
					
				},
				
			}
		},
		onLoad() {
			//第一次显示界面时执行
			this.getUserInfo()
		},
		onShow() {
			//每次显示界面都执行
		},
		methods: {
			toFeedBackList(){
				uni.navigateTo({
					url:'/pages/feedback/feedback'
				})
			},
			editUserInfo() {
				this.$refs.formUserInfo.validate().then(res => {
					uni.request({
						url: 'https://www.gzzyue.com/prod-api/system/user/profile', //注册真实接口地址。
						data: this.userInfo,
						method: 'PUT',
						header: {
							'Authorization': uni.getStorageSync("token") //自定义请求头信息
						},
						success: (res) => {
							console.log('res:', res);
							if (res.statusCode == 200) {
								if (res.data.code == 200) {
									// uni.$u.toast(res.data.msg)
									this.closeUserInfo()
									this.user.nickName=this.userInfo.nickName
									this.user.phonenumber=this.userInfo.phonenumber
									// this.showUserInfo= false 关闭弹窗
									// setTimeout(()=>{
									// 	this.closeUserInfo()
									// 	this.user.nickName=this.userInfo.nickName
									// 	this.user.phonenumber=this.userInfo.phonenumber
									// 	this.getUserInfo()
									// },3000)
								} else if (res.data.code == 500) {
									uni.$u.toast(res.data.msg)
								} else {
									uni.$u.toast('系统服务异常，请联系管理员！')
								}
							} else {
								uni.$u.toast('系统服务异常，请联系管理员！')
							}
						},
						fail: (errors) => {
							console.log('errors:', errors);
							uni.$u.toast('服务器错误，请联系管理员！')
						},
					});
					// uni.$u.toast('校验通过')
			
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			
			
			},
			editUserPwd() {
				this.$refs.formUserPwd.validate().then(res => {
					uni.request({
						url: 'https://www.gzzyue.com/prod-api/system/user/profile/updatePwd?oldPassword='+this.userInfoPwd.oldPassword+'&newPassword='+this.userInfoPwd.newPassword, //注册真实接口地址。
						
						method: 'PUT',
						header: {
							'Authorization': uni.getStorageSync("token") //自定义请求头信息
						},
						success: (res) => {
							console.log('res:', res);
							if (res.statusCode == 200) {
								if (res.data.code == 200) {
									// uni.$u.toast(res.data.msg)
									this.closeUserPwd()
									
								} else if (res.data.code == 500) {
									uni.$u.toast(res.data.msg)
								} else {
									uni.$u.toast('系统服务异常，请联系管理员！')
								}
							} else {
								uni.$u.toast('系统服务异常，请联系管理员！')
							}
						},
						fail: (errors) => {
							console.log('errors:', errors);
							uni.$u.toast('服务器错误，请联系管理员！')
						},
					});
					// uni.$u.toast('校验通过')
			
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			
			
			},
			openUserInfoEdit() {
				this.showUserInfo = true
			},
		
			closeUserInfo() {
				this.showUserInfo = false
			},
			
			openUserPwdEdit() {
				this.showUserPwd = true
			},
			closeUserPwd() {
				this.showUserPwd = false
			},
			// 老师的退出登录开始
			clear() {
				this.user.userName = ''
				this.user.nickName = ''
				this.user.phonenumber = ''
			},
			logout() {
				this.clear()
				uni.removeStorage({
					key: 'token',
					success: function(res) {
						uni.$u.toast("退出登录成功");
					}
				});
			},
			// 老师的退出登录结束
			getUserInfo() {
				uni.request({
					url: 'https://www.gzzyue.com/prod-api/getInfo', //获取个人信息。
					method: 'GET',
					header: {
						'Authorization': uni.getStorageSync("token") //自定义请求头信息
					},
					success: (res) => {
						console.log('res:', res);
						if (res.statusCode == 200) {
							if (res.data.code == 200) {
								this.user = res.data.user
									// uni.$u.toast(res.data.msg)

							} else if (res.data.code == 500) {
								uni.$u.toast(res.data.msg)
							} else {
								uni.$u.toast('系统服务异常，请联系管理员！')
							}
						} else {
							uni.$u.toast('系统服务异常，请联系管理员！')
						}
					},
					fail: (errors) => {
						console.log('errors:', errors);
						uni.$u.toast('服务器错误，请联系管理员！')
					},
				});

			}
		},
	}
</script>

<style lang="scss" scoped>
	.usercenter-container {
		.usercenter-header {
			background-color: #98c39a;
			// background-color:#eda7a7;
			// height: 100rpx;
			// line-height: 100rpx;
			// text-align: center;
			// font-size: 36rpx;
			color: #000;
		}

		.usercenter-info {
			display: flex;
			flex-direction: row;
			margin: 10px;
			height: 90px;
			// background-color: rgba(85, 170, 255, 0.8);
			// background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
			background-image: linear-gradient(-20deg, #f794a4 0%, #fdd6bd 100%);

			padding: 20px;
			border-radius: 20px;

			.info-img {
				line-height: 90px;
				display: flex;
				align-items: center;
				// border: 1rpx red solid;
			}

			.info-text {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin-left: 20px;

				.info-userName {}

				.info-nickName {}

				.info-phoneNumber {}
			}
		}

		.logout,
		.qiehuan {
			margin: 10px;

			button {
				border: 0;
				background-color: #98c39a;
			}

		}

		.exitlogin {
			margin: 10px;
		}
	}
</style>
